<template>
	<main-container>
		<el-card>
			<template #header>
				<div>
					<span>分销配置</span>
				</div>
			</template>
			<el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
				<el-form-item label="分销状态" prop="status">
					<el-radio-group v-model="form.status">
						<el-radio label="0">关闭</el-radio>
						<el-radio label="1">开启</el-radio>
					</el-radio-group>
				</el-form-item>
				<div v-if="form.status == '1'">
					<el-form-item label="分销模式" prop="distributionModel">
						<el-radio-group v-model="form.distributionModel">
							<el-radio label="1">所有人</el-radio>
							<el-radio label="2">会员分销</el-radio>
							<el-radio label="3">满额分销</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="满额分销金额" prop="fullAmount" v-if="form.distributionModel == '3'">
						<el-input-number v-model="form.fullAmount" :precision="2" style="width: 50%"></el-input-number>
					</el-form-item>
					<el-form-item label="佣金冻结天数" prop="frozenTime">
						<el-input-number v-model="form.frozenTime" :precision="0" style="width: 50%"></el-input-number>
						<span style="color: red">订单确认收货开始计算</span>
					</el-form-item>
					<el-form-item label="分销图片" prop="picUrlList">
						<SelectMaterial v-model="form.picUrlList" :canChooseImagesNum="1"></SelectMaterial>
					</el-form-item>
				</div>
				<span class="hx-card-footer">
					<el-button type="primary" v-auth="'mall:distributionconfig:edit'" @click="submitForm(formRef)" :loading="loading"><el-icon> <ele-Plus /> </el-icon> 保 存 </el-button>
					<el-button @click="resetForm"><el-icon> <ele-Refresh /> </el-icon>重 置</el-button>
				</span>
			</el-form>
		</el-card>
	</main-container>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, defineAsyncComponent } from 'vue';
import { getObj, editObj } from '/@/api/mall/distributionconfig';
import { ElMessage, FormInstance } from 'element-plus';
interface Data {
	form: {
		status: string;
		distributionModel: string;
		picUrls: string;
		fullAmount: number;
		frozenTime: number;
		picUrlList: Array<any>;
	};
	rules: any;
}
export default defineComponent({
	components: { SelectMaterial: defineAsyncComponent(() => import('/@/components/selectMaterial/index.vue')) },
	setup() {
		const data = reactive<Data>({
			form: {
				status: '0',
				distributionModel: '',
				picUrls: '',
				fullAmount: 0,
				frozenTime: 0,
				picUrlList: [],
			},
			rules: {
				status: [
					{
						required: true,
						message: '请选择分销状态',
						trigger: 'change',
					},
				],
				distributionModel: [
					{
						required: true,
						message: '请选择分销模式',
						trigger: 'change',
					},
				],
				fullAmount: [
					{
						required: true,
						message: '请输入满额分销金额',
						trigger: 'change',
					},
				],
				frozenTime: [
					{
						required: true,
						message: '请上传分销图片',
						trigger: 'change',
					},
				],
				picUrlList: [
					{
						required: true,
						message: '请输入佣金冻结天数',
						trigger: 'change',
					},
				],
			},
		});
		const loading = ref(false);
		const formRef = ref();
		const initConfig = () => {
			loading.value = true;
			getObj()
				.then((response) => {
					loading.value = false;
					data.form = response.data.data;
					data.form.picUrlList = [response.data.data.picUrls];
				})
				.catch(() => {
					loading.value = false;
				});
		};
		/**
		 * 修改配置
		 */
		const submitForm = async (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			await formEl.validate((valid, fields) => {
				if (valid) {
					loading.value = true;
					data.form.picUrls = data.form.picUrlList[0];
					editObj(data.form)
						.then((response) => {
							loading.value = false;
							ElMessage.success('保存成功');
						})
						.catch(() => {
							loading.value = false;
						});
				}
			});
		};
		/**
		 * 重置表单
		 */
		const resetForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			data.form = {
				status: '0',
				distributionModel: '',
				picUrls: '',
				fullAmount: 0,
				frozenTime: 0,
				picUrlList: [],
			};
			formEl.resetFields();
		};
		initConfig();
		return {
			loading,
			formRef,
			resetForm,
			submitForm,
			...toRefs(data),
		};
	},
});
</script>
<style lang="scss" scoped></style>
